<template>
  <div style="padding: 0 50px">
    <Header class="header-cont main__title--top">临建设施新增</Header>

    <div class="col">
      <label class="asterisk">项目名称</label>
      <Select v-model="data.projectId"
              style="width:300px"
              :disabled='isDisabled'
              @on-change='changePro'>
        <Option v-for="item in proList"
                :value="item.id"
                :key="item.id">{{ item.shortName }}</Option>
      </Select>
    </div>
    <div class="col">
      <label class="asterisk">编号</label>
      <Input v-model="data.code"
             placeholder="请输入编号"
             class="input-1"
             :disabled="this.$route.params.type != 'add'"
             maxlength="30" />
    </div>
    <div class="col">
      <label class="asterisk">名称</label>
      <Input v-model="data.name"
             placeholder="请输入临建设施名称"
             class="input-1"
             :disabled='isDisabled'
             maxlength="60" />
    </div>
    <div class="col">
      <label class="asterisk">类型</label>
      <Select v-model="data.distOverlayFacilities"
              style="width:300px"
              :disabled='isDisabled'>
        <Option v-for="item in typeList"
                :value="item.code"
                :key="item.code">{{ item.name }}</Option>
      </Select>
    </div>
    <div class="col">
      <div class="col-item">
        <label>经度</label>
        <Input v-model="data.longitude"
               placeholder="请输入经度"
               class="input-2"
               :disabled='isDisabled' />
      </div>
      <div class="col-item">
        <label>纬度</label>
        <Input v-model="data.latitude"
               placeholder="请输入纬度"
               class="input-2"
               :disabled='isDisabled' />
      </div>
      <div class="col-item">
        <label>半径</label>
        <Input v-model="data.radius"
               placeholder="请输入半径"
               class="input-2"
               :disabled='isDisabled'
               maxlength="60" />m
      </div>
    </div>
    <div class="col">
      <label>描述备注</label>
      <Input v-model="data.note"
             maxlength="500"
             type="textarea"
             placeholder="请输入项目概述"
             :rows="4"
             style="width: 500px;height:200px"
             :disabled='isDisabled' />
    </div>
    <div class="foot-modal"
         v-show="!isDisabled">
      <Row>
        <Col span="2"
             offset="8">
        <Button type="primary"
                @click="save">保存</Button>
        </Col>
        <Col span="2">
        <Button @click='closeTab'>取消</Button>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      typeList: [],
      proList: [],
      data: {
        code: '',
        projectId: ''
      }, //详情数据保存
      isDisabled: false
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    closeTab() {
      this.closeTag({
        name: 'temporary-facility-add',
        params: {
          name: this.$route.params.name,
          id: this.$route.params.id,
          type: this.$route.params.type
        }
      })
    },
    getTypeList() {
      //获取类型列表
      this.$api.user
        .dictTypeCode('OVERLAY_FACILITIES')
        .then(res => {
          if (res.code === 200) {
            this.typeList = res.data
          } else {
            this.$Message.warning(res.message)
          }
        })
        .catch(() => {
          this.$Message.warning('获取类型失败')
        })
    },
    getProList() {
      //获取项目列表
      let data = { cascade: true, isQueryJurProject: true }
      this.$api.TemporaryFacility.findProList(data)
        .then(res => {
          if (res.code === 200) {
            this.proList = res.data
          } else {
            this.$Message.warning(res.message)
          }
        })
        .catch(() => {
          this.$Message.warning('获取项目失败')
        })
    },
    getUserDefaultProject() {
      //默认所属项目
      this.$api.TemporaryFacility.getUserDefaultProject().then(res => {
        if (res.code == 200) {
          //this.$set(data, projectId, res.data.id)
          this.data.projectId = res.data.id
          this.getProCode(res.data.id)
        }
      })
    },
    changePro(flag) {
      if (flag) {
        this.getProCode(this.data.projectId)
      }
    },
    getProCode(id) {
      //机构编号
      this.$api.TemporaryFacility.findCode(id)
        .then(res => {
          if (res.code === 200) {
            if (res.data) {
              this.data.code = res.data
              //this.$set(data, code, res.data)
            }
          } else {
            this.$Message.warning(res.message)
          }
        })
        .catch(() => {
          this.$Message.warning('生成编号失败')
        })
    },
    getDetail(id) {
      if (this.$route.params.name === '日志详情') {
        this.$api.operationLog.getOperationLogDetail(id).then(res => {
          if (res.code === 200) {
            let data = JSON.parse(res.data.params)
            this.data = { ...data }
          } else {
            this.$Message.error(res.message)
          }
        })
      } else {
        this.$api.TemporaryFacility.getDetail(id).then(res => {
          if (res.code == 200) {
            this.data = res.data
            this.getTypeList()
            this.getProList()
          } else {
            this.$Message.error(res.message)
          }
        })
      }
    },
    save() {
      let params = this.$route.params
      if (!this.data.projectId) {
        this.$Message.warning('请选择项目名称')
        return
      } else if (!this.data.code) {
        this.$Message.warning('请输入编号')
        return
      } else if (!this.data.name) {
        this.$Message.warning('请临建设施名称')
        return
      } else if (!this.data.distOverlayFacilities) {
        this.$Message.warning('请选择类型')
        return
      } else if (
        this.data.longitude &&
        !this.$regex.longitude(this.data.longitude)
      ) {
        this.$Message.warning('请正确填写经度')
        return
      } else if (
        this.data.latitude &&
        !this.$regex.latitude(this.data.latitude)
      ) {
        this.$Message.warning('请正确填写纬度')
        return
      } else if (this.data.radius && this.data.radius <= 0) {
        this.$Message.warning('请正确填写半径')
        return
      } else {
        if (this.$route.params.type === 'add') {
          let reqData = {
            name: this.data.name,
            code: this.data.code,
            longitude: this.data.longitude,
            latitude: this.data.latitude,
            radius: this.data.radius,
            note: this.data.note,
            projectId: this.data.projectId,
            distOverlayFacilities: this.data.distOverlayFacilities
          }
          this.$api.TemporaryFacility.add(reqData).then(res => {
            if (res.code === 200) {
              this.$Message.success(res.message)
              this.$router.push({
                name: 'temporary-facility'
              })
              this.closeTag({
                name: 'temporary-facility-add',
                params: params
              })
              //localStorage.setItem('page-data', '')
            } else {
              this.$Message.warning(res.message)
            }
          })
        } else {
          let reqData = {
            id: this.$route.params.id,
            name: this.data.name,
            code: this.data.code,
            longitude: this.data.longitude,
            latitude: this.data.latitude,
            radius: this.data.radius,
            note: this.data.note,
            projectId: this.data.projectId,
            distOverlayFacilities: this.data.distOverlayFacilities
          }
          this.$api.TemporaryFacility.edit(reqData).then(res => {
            if (res.code === 200) {
              this.$Message.success(res.message)
              this.$router.push({
                name: 'temporary-facility'
              })
              this.closeTag({
                name: 'temporary-facility-add',
                params: params
              })
            } else {
              this.$Message.warning(res.message)
            }
          })
        }
      }
    }
  },

  mounted() {
    this.isDisabled = this.$route.params.type == 'details' ? true : false
    if (this.$route.params.type != 'add') {
      this.getDetail(this.$route.params.id)
      this.getTypeList()
      this.getProList()
    } else {
      this.getTypeList()
      this.getProList()
      this.getUserDefaultProject()
    }
  }
}
</script>

<style scoped lang="scss">
.col {
  padding: 5px;
  .col-item {
    display: inline-block;
    margin-right: 10px;
  }
  label {
    display: block;
  }
  .input-1 {
    width: 300px;
  }
  .input-2 {
    width: 150px;
  }
}
.asterisk:before {
  content: '*';
}
.header-modal {
  padding: 30px 10px;
  font-size: 16px;
  font-weight: bold;
}
.foot-modal {
  height: 100px;
  width: 100%;
  text-align: center;
  position: fix;
  bottom: 20px;
}
</style>
